<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemDeptApi } from '#/api/system/dept';
import type { DingdDeptInfoApi } from '#/api/moxi/dingdattendanceinfo';
import { onMounted, ref, watch } from 'vue';
import { Page, useVbenDrawer } from '@vben/common-ui';
import { Card, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getStatPage } from '#/api/moxi/dingdattendanceinfo';

import { useRouter } from 'vue-router';
import { useGridColumns, useGridFormSchema } from './data';

import DeptTree from './modules/dept-tree.vue';
import Form from './modules/form.vue';
import calendar from './modules/calendar.vue';

const [FormDrawer] = useVbenDrawer({
    connectedComponent: Form,
    destroyOnClose: true,
});

//监听路由是否改变
const router = useRouter();
watch(
    () => router.currentRoute.value.path,
    (newPath, oldPath) => {
        if (newPath == '/org/dingd-attendance-info') {
            isReady.value = true;
        }
    },
);

/** 刷新表格 */
function onRefresh() {
    gridApi.query();
}

/** 选择部门 */
const searchDeptId = ref<number | undefined>(undefined);
async function handleDeptSelect(dept: SystemDeptApi.Dept) {
    searchDeptId.value = dept.deptId;
    //刷新
    onRefresh();
}

// 查看详情
const selectedRow = ref<DingdDeptInfoApi.tableInfo>();
let times = ref<string>();
/** 编辑用户 */
const isReady = ref(true);
function handleEdit(row: DingdDeptInfoApi.tableInfo) {
    console.log(router.currentRoute.value.path);
    selectedRow.value = { row: row, attendMonth: times.value };
    isReady.value = false;
}

const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
    records,
}: {
    records: DingdDeptInfoApi.tableInfo[];
}) {
    checkedIds.value = records.map((item) => item.id as number);
}
// 返回主页面
const backindex = () => {
    isReady.value = true;
};

// 表格
const [Grid, gridApi] = useVbenVxeGrid({
    formOptions: {
        schema: useGridFormSchema(),
    },
    gridOptions: {
        columns: useGridColumns(),
        height: 'auto',
        keepSource: true,
        proxyConfig: {
            ajax: {
                query: async ({ page }, formValues) => {
                    times.value = formValues.attendMonth;
                    return await getStatPage({
                        pageNo: page.currentPage,
                        pageSize: page.pageSize,
                        ...formValues,
                        deptId: searchDeptId.value,
                    });
                },
            },
        },
        rowConfig: {
            keyField: 'id',
            isHover: true,
        },
        toolbarConfig: {
            refresh: { code: 'query' },
            search: true,
        },
    } as VxeTableGridOptions<DingdDeptInfoApi.tableInfo>,
    gridEvents: {
        checkboxAll: handleRowCheckboxChange,
        checkboxChange: handleRowCheckboxChange,
    },
});
</script>

<template>
    <Page auto-content-height v-if="isReady">
        <FormDrawer @success="onRefresh" />
        <ResetPasswordDrawer @success="onRefresh" />
        <AssignRoleDrawer @success="onRefresh" />
        <ImportDrawer @success="onRefresh" />

        <div class="flex h-full w-full">
            <!-- 左侧部门树 -->
            <Card class="mr-4 h-full w-1/6">
                <DeptTree @select="handleDeptSelect" />
            </Card>
            <!-- 右侧用户列表 -->
            <div class="w-5/6">
                <Grid table-title="用户列表">
                    <template #actions="{ row }">
                        <TableAction :actions="[
                            {
                                label: '查看详情',
                                type: 'link',
                                icon: ACTION_ICON.VIEW,
                                auth: ['system:user:update'],
                                onClick: handleEdit.bind(null, row),
                            },
                        ]" />
                    </template>
                </Grid>
            </div>
        </div>
    </Page>
    <calendar @back="backindex" :row-data="selectedRow" v-else />
</template>
